<template>
  <div>
    <div class="head">
      <div class="head-img"></div>
      <div class="head-title">保密情报信息采集分析平台</div>
    </div>
    <div class="foot">
      <div class="foot-img"></div>
      <div class="foot-title">
        北京时间：{{time}}
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

var out = {};
out.time = moment().format('HH:mm:ss')

setInterval(()=>{
  out.time = moment().format('HH:mm:ss')
}, 1000);

export default {
  name: 'bar',
  data(){
    return out;
  }
}
</script>

<style scoped>
.head{
  width: 100vw;
  height: 6.02vh;
  position: absolute;
  top: 0;
  left: 0;
}
.head-img{
  width: 100vw;
  height: 6.02vh;
  margin-bottom: -4.8vh;
  background-image: url(./img/main-block-bar.png);
  background-size: 100% 100%;
  transform: rotate(180deg);
}
.head-title{
  position: relative;
  color: #ffffff;
  text-align: center;
  /**font-size: 2.4vh;*/
  /** wanglei 3_22*/
  font-size: 3vh;
  text-shadow: 0 0 13px black;
}
.foot{
  width: 100vw;
  height: 5.28vh;
  position: absolute;
  bottom: 0;
  left: 0;
}
.foot-img{
  width: 100vw;
  height: 6.02vh;
  margin-bottom: -4.5vh;
  background-image: url(./img/main-block-bar.png);
  background-size: 100% 100%;
}
.foot-title{
  font-family: Consolas, "MicroSoft Yahei";
  color: #ffffff;
  text-align: center;
  font-size: 1.92vh;
}
</style>
